<template>
	<view class="body ddxq_body" >
		<view class="head">
			<view class="head_left"  @click="back"><image src="/static/img/fanhui.png"></image></view>
			<view class="head_center hei_38_bold">订单详情</view>
			<view class="head_right hei_30_bold">
				
			</view>
		</view>
		<view class="content">
			<view class="app_content" >
				<view class="xq_top bai_30_bold PingFang">
					<view class="xq_top_left">
					<view class="jishi_box">
					<text class="bai_36">
						{{item.status==0?'待审核':item.status==1?'订单进行中，请等待收货':item.status==2?'已完成':item.status==3?'已取消':item.status==4?'审核失败':''}}
						
					</text>
					
					</view>	
		
					</view>
					
				</view>

				
				

				
				<view class="xq_box">
					 <view class="shang">
						<image :src="item.productiImageUrl?item.productiImageUrl.split(',')[0]:''" mode="" class="xiangmu_img"  @click="go_shang(item.id)"></image>
						<view class="shang_right">
							<view class="shang_name hei_28_bold PingFang">
								{{item.productName}}
							</view>
							<view class="hei_26_bold PingFang dd_canshu">
								<view class="dd_canshu_left">
									<text class="hong_40">{{item.points}}</text> <text class="hong_24">积分</text>
								</view>
								
								
								<text>x{{item.num}}</text>
							</view>
						</view>
					</view>
					</view>
					
					

	
				
				
	
				
				<view class="xinxi qian_26">
					<view class="xinxi_title hei_30_bold">
						<text></text>订单信息
					</view>
					<view class="xinxi_list">
						订单状态：<text class="hong_26 " style="color: #e7246a;">
							{{item.status==0?'待审核':item.status==1?'进行中':item.status==2?'已完成':item.status==3?'已取消':item.status==4?'审核失败':''}}
						</text>	
					</view>
					<view class="xinxi_list">
						商品数量：<text class="hei_26">{{item.num}}</text>	
					</view>
					<view class="xinxi_list">
						手机号码：<text class="hei_26">{{item.username}}</text>	
					</view>
					<view class="xinxi_list">
						订单编号：<text class="hei_26">{{item.order_number}}</text>	
						<text class="hei_20 copy_btn" @click="fuzhi(item.order_number)">复制</text>
					</view>
					<view class="xinxi_list">
						创建时间：<text class="hei_26">{{item.created_at}}</text>	
					</view>
			
				</view>

	
			
				
		
				
			
			
				<view class="zhanwei_bottom">
					
				</view>
				<view class="xq_bottom">
					<button class="hei_26 bai_bg" @click="quxiao" v-if="item.status==0">关闭订单</button>
				</view>
			</view>
		</view>
	


	</view>
</template>

<script>
	import uParse from '@/components/feng-parse/parse.vue';
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),
			orderid:'',
			item:'',

			
			
		};
	},
	components: {
		uParse
	},
	onShow() {

	},
	onReady() {

	},
	onLoad(option) {
		if(option.orderid){
			this.orderid=option.orderid
			this.get_xq()
		}

		  
	},
	//下拉刷新
	onPullDownRefresh: function() {
		this.get_xq()
	},
	methods: {
		back() {
			uni.navigateBack();
		},
        go_shang(goodsid){
			uni.navigateTo({
				url:'/pages/index/xiangqing?goodsid='+goodsid
			})
		},
		replace_em(str) {
			str = str.replace(/&amp;/g, "");
			str = str.replace(/&nbsp;/g, "");
			str = str.replace(/nbsp;/g, "");
			str = str.replace(/\</g, '&lt;');
			// str = str.replace(/\>/g, '&gt;');
			str = str.replace(/&gt;/g, ">");
			str = str.replace(/gt;/g, ">");
			str = str.replace(/\n/g, '<br/>');
			str = str.replace(/\[em_([0-9]*)\]/g, '<img src="https://imgxh.hongvv.com/zu/static/bkhumor-emoji/$1.gif" border="0" style="width:40rpx"/></img>');
			return str;
		},
		fuzhi(text) {
			uni.setClipboardData({
				data: String(text),
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
			
			
		},
		go(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 保存图片
		save(url){
			let that = this;
			// #ifdef H5
			
			let alink = document.createElement('a');
			alink.href = url;
			alink.download = url;
			alink.click();
			// #endif
			// #ifdef APP-PLUS||MP-ALIPAY||MP-WEIXIN||MP-KUAISHOU
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == 'android'){
				that.$refs.popup_quanxian.open();
			}
			//#endif
			
			uni.showLoading({
				title: '保存中'
			});
			uni.saveImageToPhotosAlbum({
				filePath: url,
				success: function() {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					that.$refs.popup_quanxian.close();
					uni.setStorageSync('is_tanxiangji', 1);
				},
				fail: function() {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败，请稍后重试',
						icon: 'none'
					});
					that.$refs.popup_quanxian.close();
				}
			});
			// #endif
		},
		get_xq() {
			
			this.$http
				.get({
					url: '/api/getOrder/'+this.orderid,
				})
				.then(res => {
					if (res.code == 200) {
                          this.item=res.order
						
					}	  
						  
					
				});
		},
		quxiao(orderid){
			this.caozuo_orderid=orderid
			uni.showModal({
				title: '提示',
				content: '确定取消订单？',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确认", // 确认按钮的文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#f55850',
				cancelColor: '#666',
				success: (res) => {
				if(res.confirm) {  
					console.log('comfirm') //点击确定之后执行的代码
					this.quxiao_go()
				} else {  
					console.log('cancel') //点击取消之后执行的代码
					}  
				} 
			})
		},
		quxiao_go(){
			this.$http
				.delete_api({
					url: '/api/cancelOrder/'+this.orderid,
				})
				.then(res => {
					if (res.code == 200) {
			            uni.showToast({
			            	title: '取消成功'
			            });
			            setTimeout(()=>{
			            	this.get_xq()
			            },500)
						
					}
				});
		},
		clickImg(img) {
			uni.previewImage({
				urls: ['' + img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		},
	},
	filters: {
		timeStamp: function(value) {
			if (value == null) {
				return 'null';
			}
			var i = (value + '').length;
			while (i++ < 13) value = value + '0';
			value = Number(value);
			var date = new Date(value);
			//date.setTime(value);
			var month = date.getMonth() + 1;
			var hours = date.getHours();
			if (hours < 10) hours = '0' + hours;
			var minutes = date.getMinutes();
			if (minutes < 10) minutes = '0' + minutes;
			var time = date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + hours + ':' + minutes;
			return time;
		}
	}
};
</script>

<style>
.head {
	border-bottom: 1px solid #eeeeee;
	font-family: PingFangSCBold;
}
page {
	background-color: #f7f7f7;
	user-select: text;
	padding-bottom: 80rpx;
}
.app_content {
	padding-bottom: 50rpx;
}

.xq_top{
	height: 140rpx;
	background: url(../../static/img/dd_top.png) no-repeat;
	background-size: 100% 100%;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.xq_box{
	padding: 0 20rpx 0rpx;
	background-color: #ffffff;
}


.bai_bg{

	background-color: #ffffff;
	
	border: solid 2rpx #dadada;
	
}

.xq_bottom button{
	width: 180rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 40rpx;
	margin-left: 20rpx;
}
.xq_bottom{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20rpx ;
	position: fixed;
	bottom: 0;
	height: 100rpx;
	box-sizing: border-box;
	width: 100%;
	background-color: #ffffff;
	box-shadow: 0rpx -2rpx 5rpx 0rpx 
			rgba(0, 0, 0, 0.17);
}

.go_right{
	width: 12rpx;
	height: 22rpx;
}

.shang{
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	width: 100%;
}
.shang_right{
	margin-left: 20rpx;
	width: 530rpx;
}

.xiangmu_img{
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}

.list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	border-top: 1px solid #f2f2f2;
}
.xinxi{
	background-color: #ffffff;
	margin: 14rpx 0;
	padding: 0 30rpx 2rpx;
}
.xinxi_title{
	line-height: 90rpx;
	display: flex;
	align-items: center;
	position: relative;
}

.xinxi_list{
	margin-bottom: 26rpx;
	position: relative;
}
.copy_btn{
	position: absolute;
	right:30rpx;
	width: 98rpx;
	height: 48rpx;
	background-color: #f7f7f7;
	border-radius: 24rpx;
	line-height: 48rpx;
	text-align: center;
}

.xinxi_title text{
	width: 6rpx;
	height: 30rpx;
	background-color: #e7246a;
	border-radius: 3rpx;
	margin-right: 8rpx;
}


.shang_name {
	word-break: break-all;
}

.fuzhi{
	padding: 4rpx 20rpx;
	display: inline-block;
	border-radius: 18rpx;
	border: solid 1px #eeeeee;
	margin-left: 20rpx;
	
}
.dd_canshu{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dd_canshu_left text{
	margin-right: 4rpx;
}
</style>
